import { reactive } from 'vue'

const echartsThemeObj = {
    "theme1": {
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#eeeeee"
            },
            "subtextStyle": {
                "color": "#aaaaaa"
            }
        },
        "line": {
            "itemStyle": {
                "borderWidth": 1
            },
            "lineStyle": {
                "width": 2
            },
            "symbolSize": 4,
            "symbol": "circle",
            "smooth": false
        },
        "radar": {
            "itemStyle": {
                "borderWidth": 1
            },
            "lineStyle": {
                "width": 2
            },
            "symbolSize": 4,
            "symbol": "circle",
            "smooth": false
        },
        "bar": {
            "itemStyle": {
                "barBorderWidth": 0,
                "barBorderColor": "#ccc"
            }
        },
        "pie": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "scatter": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "boxplot": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "parallel": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "sankey": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "funnel": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "gauge": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "candlestick": {
            "itemStyle": {
                "color": "#fd1050",
                "color0": "#0cf49b",
                "borderColor": "#fd1050",
                "borderColor0": "#0cf49b",
                "borderWidth": 1
            }
        },
        "graph": {
            "itemStyle": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            },
            "lineStyle": {
                "width": 1,
                "color": "#aaaaaa"
            },
            "symbolSize": 4,
            "symbol": "circle",
            "smooth": false,
            "color": [
                "#dd6b66",
                "#759aa0",
                "#e69d87",
                "#8dc1a9",
                "#ea7e53",
                "#eedd78",
                "#73a373",
                "#73b9bc",
                "#7289ab",
                "#91ca8c",
                "#f49f42"
            ],
            "label": {
                "color": "#eeeeee"
            }
        },
        "map": {
            "itemStyle": {
                "areaColor": "#eee",
                "borderColor": "#444",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#000"
            },
            "emphasis": {
                "itemStyle": {
                    "areaColor": "rgba(255,215,0,0.8)",
                    "borderColor": "#444",
                    "borderWidth": 1
                },
                "label": {
                    "color": "rgb(100,0,0)"
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#eee"
                }
            },
            "axisTick": {
                "show": true,
                "lineStyle": {
                    "color": "#eee"
                }
            },
            "axisLabel": {
                "show": true,
                "color": "#eeeeee"
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#aaaaaa"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": false,
                "lineStyle": {
                    "color": "#eeeeee"
                },
            },
            "axisTick": {
                "show": true,
                "lineStyle": {
                    "color": "#eeeeee"
                }
            },
            "axisLabel": {
                "show": true,
                "color": "#eeeeee"
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#aaaaaa"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            }
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#ccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#ccc",
                    "width": 1
                },
                "label":{
                    "color":"#000"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#fff"
            }
        },
    }
}


const lineOption = reactive({
    // 设置图表的标题
    title: {
        // 设置标题文本
        text: "",
        // title 组件离容器左侧的距离
        left: "center",
    },
    // 设置图表的 X 轴
    xAxis: {
        // 数据类型为离散的类目数据
        type: "category",
        // 设置 X 轴数据
        boundaryGap: false,
        data: [],
        axisLabel: {
            interval: 'auto'
        },
        splitLine: {
            show: false
        }
    },
    // 设置提示框组件
    tooltip: {
        // 设置提示框的触发条件
        trigger: "axis",
        axisPointer: {
            type: 'cross',
        },

    },
    // 设置图表的 Y 轴
    yAxis: {
        // 数据类型为连续的数值数据
        type: "value",
        splitLine: {
            show: false
        },
        axisLine: {
            show: true
        }
    },
    // 设置图表的图例
    series: [{
        name: '安全防护设备日志',
        // 图例中要展示的数据
        data: [],
        // 设置图表的类型为折线图
        type: "line",
        // 平滑曲线
        smooth: true,
        symbol: 'none',
        areaStyle: {},
    }]
});

const barOption = reactive({
    xAxis: {
        type: 'category',
        axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
        },
        data: []
    },
    tooltip: {
        // 设置提示框的触发条件
        trigger: "axis",
        axisPointer: {
            type: 'cross',
        },

    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
        },
        axisTick: {
            show: true,
        }
    },
    series: [
        {
            data: [],
            type: 'bar'
        }
    ]
})

const pieOption = reactive({
    title: {
        text: '',
        subtext: '',
        left: 'center'
    },
    // 设置提示框组件
    tooltip: {
        // 设置提示框的触发条件
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        left: 'center',
        top: '10%',
    },
    // 设置图表的图例
    series: [{
        name: '告警级别统计',
        type: 'pie',
        radius: '50%',
        label: {
            show: false,
        },
        data: [],
    }]
})
export {
    echartsThemeObj,
    lineOption,
    barOption,
    pieOption
}